<template>
    <div>
        <header  class="main-header" style="background-image:url(https://hexo-theme-snippet-1251680922.cos.ap-beijing.myqcloud.com/img/banner.jpg)">
            <div class="main-header-box">
                <a class="header-avatar" href="/" title="John Doe">
                    <img src="@/assets/github.jpg" alt="logo头像" class="img-responsive center-block" />
                </a>
                <div style="margin-top: 30px;color:#fff;font-size:18px;font-family:Cursive;">
                    <span>桐原的个人博客</span>
                </div>
            </div>
        </header>
        <nav class="main-navigation">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="navbar-header">
              <span  class="nav-toggle-button collapsed pull-right"  data-toggle="collapse" data-target="#main-menu"  id="mnav">
                <span class="sr-only"></span>
                <i class="el-icon-s-order"></i>
              </span>
              <a class="navbar-brand" @click="toHome" >桐原</a>
            </div>
            <div class="collapse navbar-collapse" id="main-menu">
              <el-menu
              :default-active="this.$route.path"
              class="el-menu-demo"
              mode="horizontal"
              router
              background-color="#fff"
              text-color="#333"
              active-text-color="#0084ff"
              >
                <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
                      <template slot="title">
                        <span> {{ item.navItem }}</span>
                      </template>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
        </div>
      </div>
    </nav>
    </div>
</template>

<script>
    export default {
        name:'myheader',
        data(){
            return {
                navList:[
                    {name:'/pages/Home', navItem:'首页'},
                    {name:'/pages/Archive',navItem:'归档'},
                    {name:'/pages/Message',navItem:'留言'},
                    {name:'/pages/Categorize',navItem:'分类'},
                    {name:'/pages/Nav',navItem:'导航'},
                    {name:'/pages/About',navItem:'关于我'},
                ]
            }
        },
        methods:{
          toHome(){
            this.$router.push(`/pages/Home`)
          }
        }
    }
</script>
<style>
.main{
  width: 1170px;
  margin:0 auto; 
  height: 100%;
  display: flex;
}
.main-header{
  margin-top: -100px;
}
.main-content{
  width: 66.66%;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.main-nav{
  width: 33.33%;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.widget{
  background: #fff;
  padding: 16px 25px;
}
.el-menu.el-menu--horizontal {
      margin-left: 370px;
      border: 0;
}
</style>
<style src="../assets/css/style.css"></style>
<!-- <style src="../assets/css/font-awesome.min.css"></style>
<style src="../assets/css/bootstrap.min.css"></style> -->